<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body onload="connect();">

<button type="button" id="forward" class="btn btn-primary">前进</button>
<button type="button" id="backward" class="btn btn-secondary">后退</button>
<button type="button" id="to_left" class="btn btn-success">左移</button>
<button type="button" id="to_right" class="btn btn-danger">右移</button>
<button type="button" id="turn_left" class="btn btn-warning">左转</button>
<button type="button" id="turn_right" class="btn btn-info">右转</button>

<img id="video">
<script type="text/javascript" src="__PUBLIC__/chat/js/swfobject.js"></script>
<script type="text/javascript" src="__PUBLIC__/chat/js/web_socket.js"></script>
<script type="text/javascript" src="__PUBLIC__/chat/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
  if (typeof console == "undefined") {    this.console = { log: function (msg) {  } };}
  // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
  WEB_SOCKET_SWF_LOCATION = "__PUBLIC__/chat/swf/WebSocketMain.swf";
  // 开启flash的websocket debug
  WEB_SOCKET_DEBUG = true;

  var ws, name, client_list={};

  // 连接服务端
  function connect() {
    // 创建websocket
    // ws = new WebSocket("ws://121.40.66.159:7272");
      ws = new WebSocket("ws://127.0.0.1:7272");
    // 当socket连接打开时，输入用户名
    ws.onopen = onopen;
    // 当有消息时根据消息类型显示不同信息
    ws.onmessage = onmessage;
    ws.onclose = function() {
      console.log("连接关闭，定时重连");
      connect();
    };
    ws.onerror = function() {
      console.log("出现错误");
    };
  }

  // 连接建立时发送登录信息
  function onopen()
  {

    // 登录
    var login_data ='{"type":"login","client_name":"receiver","id":"1"}'
    console.log("websocket连接成功，发送登录数据:"+login_data);
    ws.send(login_data);
  }

  function onmessage(e)
  {
    console.log(e.data);
    var data = eval("("+e.data+")");
    switch(data['type']){
            // 服务端ping客户端
      case 'ping':
        ws.send('{"type":"pong"}');
        break;
            // 登录 更新用户列表
      case 'login':
        //{"type":"login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
        alert("已与服务器搭建websocket连接"+data['msg']);
            // 发言
      case 'stream':
          $("#video").attr("src","data:image/jpg;base64,"+data['base64_image'])
          // $("#video").attr("src",data['base64_image'])
          // alert('收到信息:'+data['base64_image']);
    }
  }

  function _control(direction,_switch){
      if(_switch == 1){
          ws.send('{"type":"control","direction":"'+ direction +'"}');
      }else{
          ws.send('{"type":"control","direction":"stop"}');
      };

  }

</script>
<script>
    let btn_forward = $("#forward");
    let btn_backward = $("#backward");
    let btn_to_left = $("#to_left");
    let btn_to_right = $("#to_right");
    let btn_turn_left = $("#turn_left");
    let btn_turn_right = $("#turn_right");

    btn_turn_right.mousedown(function (){
        _control("turn_right",1)
    });
    btn_turn_right.mouseup(function (){
        _control("turn_right",0)
    });

    btn_turn_left.mousedown(function (){
        _control("turn_left",1)
    });
    btn_turn_left.mouseup(function (){
        _control("turn_left",0)
    });

    btn_to_right.mousedown(function (){
        _control("to_right",1)
    });
    btn_to_right.mouseup(function (){
        _control("to_right",0)
    });

    btn_to_left.mousedown(function (){
        _control("to_left",1)
    });
    btn_to_left.mouseup(function (){
        _control("to_left",0)
    });


    btn_backward.mousedown(function (){
        _control("backward",1)
    });
    btn_backward.mouseup(function (){
        _control("backward",0)
    });



    btn_forward.mousedown(function (){
        _control("forward",1)

    });
    btn_forward.mouseup(function (){
       _control("forward",0)

    });


</script>
</body>
</html>